<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button id="start-button">打开拾色器</button> <span id="result"></span>
<script>
  document.getElementById("start-button").addEventListener("click", () => {
    const resultElement = document.getElementById("result");

    if (!window.EyeDropper) {
      resultElement.textContent = "你的浏览器不支持 EyeDropper API";
      return;
    }

    const eyeDropper = new EyeDropper();
    const abortController = new AbortController();

    eyeDropper
      .open({ signal: abortController.signal })
      .then((result) => {
        resultElement.textContent = result.sRGBHex;
        resultElement.style.backgroundColor = result.sRGBHex;
      })
      .catch((e) => {
        resultElement.textContent = e;
      });

    setTimeout(() => {
      abortController.abort();
    }, 2000);
  });
</script>
</body>
</html>